<template>
	<view>
		<uv-navbar
			:leftIconColor="navstyle.txtColor"
			:titleStyle="titleStyle"
			:title="navstyle.title"
			:leftIcon="navstyle.leftIcon"
			:bgColor="navstyle.bgColor"
			:fixed="false" 
			@leftClick="leftClick"
			:safeAreaInsetTop="false">
		</uv-navbar>
		<view class="card_li">
			<view class="infcar" v-if="cardlist.length != 0" v-for="(item,index) in cardlist" :key="index">
				<view class="carlin">
					<view class="shoukon">收款银行：<text>{{item.bankName}}</text></view>
					<view class="sho_in">银行卡号：<text>{{item.cardNum}}</text> </view>
				</view>
				<view class="xiugai" @click="detailClick(item)">
					<image src="../../static/img/bonus/edit.png" mode=""></image>
				</view>
			</view>
			<view class="new_card" @click="addClick">
				添加银行卡 +
			</view>
		</view>
	</view>
</template>

<script>
	import {getPay} from '@/api/bonus.js'
	export default{
		data(){
			return{
				navstyle: {
					title: "我的银行卡",
					txtColor: "#333333",
					bgColor: "#FFFFFF",
					leftIcon: "arrow-left"
				},
				titleStyle: {
					fontWeight: 700
				},
				 cardlist: []
			}
		},
		
		onShow() {
			this.getPayEvent()
		},
		methods:{
			leftClick() {
				uni.reLaunch({
				  url: '/pages/bonus/bankcard' // 替换成上一页的路径
				});
			},
			getPayEvent(){
				let type=0
				getPay(type).then(response=>{
					console.log(response)
					this.cardlist = response.data;
					
				})
			},
			addClick(){
				uni.navigateTo({
				  url: '/pages/bonus/card_add'
				});
			},
			detailClick(item){
				uni.navigateTo({
				  url: '/pages/bonus/card_add?id='+ item.id
				});
				uni.setStorageSync("bankData", JSON.stringify(item));
			}
		}
	}
</script>

<style>
	.page{
		width: 100%;
		height: 100%;
	    background-color: #fafafa;
	}
	.card_li{
	    display: flex;
	    flex-direction: column;
	}
	.infcar{
	    width: 90%;
	    margin: 10px auto;
	    padding: 10px;
	    border-radius: 3px;
	    background-color: #3d4249;
	    box-shadow: 0 2px 5px #c1c1c1;
	    color: #fff;
	    line-height: 37px;
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	}
	.carlin{
	    display: flex;
	    flex-direction: column;
	}
	.shoukon, .sho_in{
	    font-size: 16px;
	}
	.shoukon text {
	    color: #c38538;
	    padding-left: 8px;
	}
	.sho_in text {
	    color: #e3c88e;
	    padding-left: 8px;
	}
	.xiugai image {
	    width: 26px;
	    height: 26px;
	}
	.new_card {
	    color: #fff;
	    width: 85%;
	    margin: 10px auto;
	    padding: 10px;
	    background: linear-gradient(#d66c6b, #ed6266);
	    border-radius: 21px;
	    text-align: center;
	}
</style>